<!-- <template>
    <div class="userservice">
        <div class="messagebox">
            <div class="time">
                <el-form style="display: flex;">
                    <div class="word">时长:</div>
                    <el-form-item prop="region">
                        <el-select placeholder="请选择活动区域" v-model="ruleForm.region">
                            <el-option label="2小时" value="shanghai"></el-option>
                            <el-option label="4小时" value="beijing"></el-option>
                            <el-option label="6小时" value="beijing"></el-option>
                            <el-option label="8小时" value="beijing"></el-option>
                            <el-option label="10小时" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="settled('ruleForm')">立即创建</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <div class="amount">
                <div class="word">金额:<span>100</span>元</div>
            </div>
        </div>
    </div>
</template> -->
<template>
    <div class="userservice">
        <div class="content">
            <div style="margin-top: 30px;">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="时长:" prop="time" class="time">
                        <el-select v-model="ruleForm.time" placeholder="请选择时长">
                            <el-option label="2小时" value="2"></el-option>
                            <el-option label="4小时" value="4"></el-option>
                            <el-option label="6小时" value="6"></el-option>
                            <el-option label="8小时" value="8"></el-option>
                            <el-option label="10小时" value="10"></el-option>
                            <el-option label="12小时" value="12"></el-option>
                            <el-option label="14小时" value="14"></el-option>
                            <el-option label="16小时" value="16"></el-option>
                            <el-option label="18小时" value="18"></el-option>
                            <el-option label="20小时" value="20"></el-option>
                            <el-option label="22小时" value="22"></el-option>
                            <el-option label="24小时" value="24"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="amount">
                        <div class="word"> 金额 : <span>{{ jisuan() }} </span><span style="position: absolute;left:130px">(元)</span></div>
                    </div>
                    <el-form-item style="position:absolute;bottom: 10px;right:40px">
                        <el-button type="primary" @click="submitForm('ruleForm')">开户</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 订单数据框 -->
        <div class="message" v-show="createMessage">
            <div class="top" style="height:40px;display: flex;justify-content: space-around;margin-top:10px">
                <div style="font-size: 16px;"><i class="el-icon-success" style="color:green"></i> 开户成功</div>
                <span> 创建时间 : {{order.start}} </span>
            </div>
            <div style="height:1px;background-color:rgb(232, 234, 236);"></div>
            <div class="bottom" style="margin-left: 20px;">
                <ul>
                    <li><i class="el-icon-user"></i> 账号 : <span style="color:rgb(25, 190, 157);font-weight: 700;">{{ order.account }}</span></li>
                    <li><i class="el-icon-key"></i>  密码: <span style="color:rgb(25, 190, 157);font-weight: 700;">{{ order.password }}</span></li>
                    <li><i class="el-icon-coin"></i> 金额 : <span style="color: #f60;font-weight: 700;">{{ order.amount }}</span></li>
                    <li><i class="el-icon-s-order"></i> 订单编号 : <span style="color: rgb(43, 133, 228)">{{ order._id }}</span></li>
                </ul>
            </div>
        </div>
        <!-- 密码验证对话框 -->
        <Modal width="360" draggable v-model="isCheckPassword" :mask-closable="false">
            <p slot="header" style="color:#f60;">
                <Icon type="ios-information-circle"></Icon>
                <span>验证密码</span>
            </p>
            <div style="text-align:left;font-size: 14px;">
                <Row>
                    <Col span="18">
                    <!--不加enter的话，输入密码时会一直响应，在组件使用要加native-->
                    <!-- 组件响应原生事件，要加native。Input是组件 -->
                    <Input type="password" icon="ios-key" placeholder="请输入管理员密码..." v-model="inputPassword"
                        @keyup.enter.native="checkPwd()" />
                    </Col>
                    <Col span="6">
                    <el-button type="primary" size="small" @click="checkPwd()" >验证</el-button>
                    </Col>
                </Row>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCheckPassword: false,
            inputPassword: "",
            createMessage:false,
            much:"",
            ruleForm: {
                time: '',
            },
            rules: {
                time: [
                    { required: true, message: '请选择时长', trigger: 'change' }
                ]
            },
            order:{
                account:"",
                password:"",
                amount:"",
                _id:"",
                start:""
            }
        };
    },
    methods: {
        //实时根据所选时间更新价格
        jisuan(){
            return this.ruleForm.time*20
        },
        // 验证管理员密码
        checkPwd() {
            console.log('checkPwd')
            // 获取输入的密码
            const inputPassword = this.inputPassword.trim()
            if (inputPassword.length > 0) {
                // 把密码验证框给关闭
                this.isCheckPassword = false
                // 把这个密码发到服务端去校验
                this.$axios.post('http://localhost:3000/api/admin/islegal', {
                    password: inputPassword,
                    email: this.$store.getters.adminInfo.email
                }).then(res => {
                    // 把表单中的数据给发送到服务端
                    // 提交添加音乐对话框表单中的数据
                    console.log('islegal res=>', res)
                    if (res.data.result == "true") {
                        this.$axios.post('http://localhost:3000/api/admin/music/addAccount', this.ruleForm)
                            .then(res=>{
                                // console.log("add song res=>",res.data.time);
                                this.$Message.success(res.data.result)
                                console.log('account=>',res.data);
                                this.order = res.data.message
                                console.log("order",this.order);
                                this.createMessage = true
                                this.inputPassword = ""
                                // this.order.amount = ""
                                // this.$refs.ruleForm.resetFields()
                            })
                            .catch(err=>{
                                console.log("err",err);
                            })                           
                            // 清空表单中的已填写的内容(重置)
                            // this.$nextTick(() => {
                            //     this.inputPassword = ""
                            //     this.$refs.ruleForm.resetFields()
                            // })
                    }
                }).catch(err => {
                    alert('密码错误')
                    this.inputPassword = ""
                })
            } else {
                this.isCheckPassword = false
                this.$Modal.warning({
                    title: '提示',
                    content: '密码不能为空，请输入管理员口令',
                    onOk: () => {
                        this.isCheckPassword = true
                    }
                })
            }
        },
        //将时间上传

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    console.log(this.ruleForm.time);
                    this.isCheckPassword = true
                    // this.$axios.post('http://localhost:3000/api/admin/music/addAccount', this.ruleForm)
                    // .then(res=>{
                    //     // console.log("add song res=>",res.data.time);
                    //     this.$Message.success(res.data.result)
                    //     console.log('account=>',res.data);
                    //     this.order = res.data.message
                    //     console.log("order",this.order);
                    //     this.createMessage = true
                    // })
                    // .catch(err=>{
                    //     console.log(err);
                    // })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.userservice {
    width: 100%;
    height: 100%;
    background-image: url('../assets/image/userservice.jpg');
    background-size: 100% 100%;
    transform: translateX(-1px);
}
.content {
    position: absolute;
    top: 15%;
    left: 30%;
    width: 640px;
    height: 260px;
    background-color: hsla(56, 0%, 77%, 0.4);
    border-radius: 5px;
}

// .form {
//     // display: flex;
//     margin-top: 30px;
//     // margin-left: 30px;
// }

.amount {
    margin-left: 30px;
    margin-top: 20px
}

.word {
    height: 40px;
    line-height: 40px;
    margin-left: 22px;
    font-size: 16px;
    font-weight: 600;
}

// .button {
//     position: absolute;
//     bottom: 20px;
//     right: 20px
// }
.message{
    width:400px;
    height:192px;
    background-color: white;
    position: absolute;
    top:50%;
    left:37.5%
}
ul li{
    margin-top: 10px;
}
</style>